<template>
  <section class="component principal-recovery">
    <el-form :model="dataForm" :rules="rules" label-width="122px" ref="dataFrom">
      <el-form-item label="回收方式" prop="recoveryType">
        <el-select clearable placeholder="请选择" v-model="dataForm.recoveryType">
          <el-option v-for="{index,name,code} in $dict.getDictData('RecoveryType')" :key="index" :label="name" :value="code"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div style="text-align: center;">
      <p style="font-size: 15px;">确定将 {{ids.length}} 笔案件进行回收吗？</p>
    </div>
    <div class="operate-buttons">
      <el-button @click="emitClose">取消</el-button>
      <el-button :loading="submitLoading" @click="commit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import { Vue, Component, Emit, Prop } from 'vue-property-decorator'
import { Dependencies } from "~/core/decorator";
import { FlowTaskService } from "~/services/domain-service/flow-task.service";
import { Form } from "element-ui";
import { TelCaseManageService } from "~/services/domain-service/tel-case-manage.service";

@Component({
  components: {
  }
})
export default class PrincipalRecovery extends Vue {
  @Dependencies(TelCaseManageService)
  private telCaseManageService: TelCaseManageService;

  @Prop({ type: Array, required: true }) private ids;
  @Prop({ type: String }) private fromChannel;

  private dataForm: any = {
    ids: [],
    recoveryType: ''

  }
  private checkMessages: any = {}
  private rules: any = {
    recoveryType: { required: true, message: "请选择回收方式" },
  }
  private submitLoading: boolean = false
  private dialog: boolean = false


  @Emit('close') private emitClose() {
    this.resetDate()
  }

  /**
   * 提交
   */
  private commit() {
    const dataFrom: any = this.$refs["dataFrom"];
    dataFrom.validate(valid => {
      if (!valid) return false;
      this.submit()
    });
  }

  
  /**
   * 提交接口调用
   */
  private submit() {
    this.submitLoading = true;
    this.dataForm.ids = this.ids;
    this.telCaseManageService
      .dealManualPartReturnCase(this.dataForm)
      .subscribe(this.success, this.error);
  }

  /**
   * 申请成功
   */
  private success(data: any) {
    if (data && data.status !== 2) {
      this.checkMessages = data;
      this.dialog = true;
    } else {
      this.submitLoading = false;
      this.$message.success("操作成功");
      this.emitClose();
    }
  }

  /**
   * 失败
   */
  private error() {
    this.submitLoading = false;
  }

  /**
   * 取消
   */
  private cancelContinue() {
    this.dialog = false;
    this.submitLoading = false;
  }

  /**
   * 继续提交
   */
  private confirmSubmit() {
    this.dataForm.confirm = 1;
    this.submit();
  }

  /**
   * 数据重置
   */
  private resetDate() {
    this.dataForm = {
      ids: [],
      recoveryType: ''
    }

    const form: any = this.$refs["dataFrom"] as Form;
    form.resetFields();

    this.checkMessages = {}
  }
}
</script>

<style lang="less">
</style>